<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-for="item in tabOptions" :key="item.name" :label="item.label" :name="item.name">
      <el-tree
        @check="checkTreeNode(item.name, $event)"
        :check-on-click-node="true"
        :data="item.data"
        :expand-on-click-node="false"
        :props="item.props"
        ref="tree"
      ></el-tree>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'TabTree',
  props: {
    tabOptions: {
      type: Array,
    },
    checkTreeNode: {
      type: Function,
      default: function (name, event) {
        console.log(name)
        console.log(event)
      },
    },
  },
  computed: {
    activeName() {
      return this.tabOptions[0].name
    },
  },
}
</script>
